<template>
	<view>
		<!-- 	
		<cu-custom bgColor="bg-gradual-primary" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">设置</block>
		</cu-custom> -->

		<!-- list item -->
		<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">


			<view class="cu-item" :class="menuArrow?'arrow':''" @click="editDays()">
				<!-- <view class="flex content justify-between text-sm" @click="editDays()">
					<text class="text-df">平均月经持续</text>
					<text>{{avrgMenstruationDuration}}天</text>
				</view> -->

				<view class="content padding-tb-sm">
					<view>
						<text class=" text-primary margin-right-xs"></text>平均月经持续</view>
					<view class="text-gray text-sm">
						<!-- <text class="cuIcon-infofill margin-right-xs"></text> -->
						开始到结束时间，一般为7天</view>
				</view>
				<view class="action">
					<text>{{avrgMenstruationDuration}}天</text>
				</view>
			</view>

			<!-- <view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content padding-tb-sm">
					<view>
						<text class="cuIcon-timefill text-primary margin-right-xs"></text>平均月经间隔</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-infofill margin-right-xs"></text>结束到下次开始时间，一般为28天</view>
				</view>
				<view class="action">
					<text>{{avrgMenstruationDuration}}天</text>
				</view>
			</view> -->

			<view class="cu-item" :class="menuArrow?'arrow':''">
				<view class="flex content justify-between text-sm" @click="addRecord()">
					<text class="text-df">添加历史记录</text>
				</view>
			</view>





		</view>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">编辑周期</view>
					<!-- <view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view> -->
				</view>
				<view class="cu-form-group">

					<input placeholder="输入周期" name="input" v-model="editData"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="sureUpdate">确定</button>

					</view>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	import helper from '../../../common/helper.js';
	import Bus from '../../../common/bus.vue';
	export default {
		data() {
			return {
				menuArrow: true,
				menuBorder: true,
				menuCard: true,
				modalName: '',
				avrgMenstruationDuration: '',
				userInfo: {},
				editData: '',
				ymNotifyOpened: true,


			}
		},

		onShow: function() {
			console.log('setting onShow');
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log(res);
					if (res.errMsg === 'getStorage:ok' && res.data != null && res.data != '') {
						that.userInfo = res.data;
						that.avrgMenstruationDuration = that.userInfo.avrgMenstruationDuration;
						Bus.$emit('userInfo', "fromSetting");
					} else {}
				},
				fail: function(e) {
					console.log(e);
				}
			});

		},
		methods: {

			onShareAppMessage: function() {
				qq.showShareMenu({
					showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
				})
			},
			addRecord() {

				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '../ym-detail/ym-detail?from=addRcord'
				});
			},

			editDays() {
				console.log("editDays");
				this.modalName = 'Modal'
			},

			hideModal(e) {
				console.log("hide");
				this.modalName = 'hide'
			},

			sureUpdate(e) {
				this.updateCycleDays();
			},

			// 调用服务器
			updateCycleDays() {
				uni.showLoading({
					title: "加载中"
				});
				let that = this;

				let userInfo = uni.getStorageSync('userInfo');
				console.log(userInfo);

				userInfo.avrgMenstruationDuration = that.editData;

				let playod = userInfo;


				uni.request({
					url: helper.api + '/appUser/open/updateByUserId', //仅为示例，并非真实接口地址。
					method: 'post',
					data: playod,
					header: {
						'Content-Type': 'application/json' //自定义请求头信息
					},

					success: (res) => {
						uni.hideLoading();
						console.log(res.data);

						if (res.data.code === 0) {
							that.hideModal(null);
							uni.showToast({
								title: "操作成功！",
								duration: 1000
							});
							that.userInfo.avrgMenstruationDuration = that.editData;
							that.avrgMenstruationDuration = that.editData;
							uni.setStorage({
								key: 'userInfo',
								data: that.userInfo,
								success: function() {
									console.log('save userInfo success');
								}
							});
							// todo 刷新数据
						} else {
							uni.showModal({
								title: '请求失败！',
								content: '错误原因:' + res.data.msg,
								showCancel: false
							});
							return;
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showModal({
							title: '请求失败！',
							content: '错误原因:' + err,
							showCancel: false
						});
					}
				});
			},


		},
	}
</script>

<style>
	.seetingItem {
		height: 100rpx;
	}
</style>
